import React from 'react';
import useConnect from './connect';
import { Context } from './store';
import DeepChild from './deepChild';

const Child = () => {
  // 通过 useConnect 获取最顶层数据
  const { state, dispatch } = useConnect(Context);
  return (
    <div className="child">
      <p>姓名:{state.name}</p>
      <p>年龄:{state.age}</p>
      <button onClick={() => dispatch({ type: 'CHANGENAME' })}>
        changeName
      </button>
      <p>deep child:</p>
      <DeepChild />
    </div>
  );
};

export default Child;
